<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务报告管理 - 应急响应中心管理系统</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <th:block th:replace="~{fragments/header :: navbarStyles}"></th:block>
    
    <style>
        .report-card {
            transition: transform 0.2s;
        }
        .report-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .photo-preview {
            max-height: 150px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
        }
        .content-preview {
            max-height: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div th:replace="~{fragments/header :: navbar}"></div>
    <div class="container-fluid">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col">
                <h2><i class="bi bi-file-text"></i> 任务报告管理</h2>
                <p class="text-muted">管理和查看所有任务报告</p>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card">
                    <h4 id="totalReports">0</h4>
                    <p>总报告数</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h4 id="todayReports">0</h4>
                    <p>今日报告</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h4 id="weekReports">0</h4>
                    <p>本周报告</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h4 id="monthReports">0</h4>
                    <p>本月报告</p>
                </div>
            </div>
        </div>

        <!-- 筛选区 -->
        <div class="filter-section">
            <div class="row">
                <div class="col-md-2">
                    <label class="form-label">事件ID</label>
                    <input type="number" class="form-control" id="eventIdFilter" placeholder="事件ID" onchange="applyFilters()">
                </div>
                <div class="col-md-2">
                    <label class="form-label">报告人</label>
                    <select class="form-select" id="reporterFilter" onchange="applyFilters()">
                        <option value="">全部报告人</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">时间范围</label>
                    <select class="form-select" id="timeRangeFilter" onchange="applyFilters()">
                        <option value="">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">开始日期</label>
                    <input type="date" class="form-control" id="startDateFilter" onchange="applyFilters()">
                </div>
                <div class="col-md-2">
                    <label class="form-label">结束日期</label>
                    <input type="date" class="form-control" id="endDateFilter" onchange="applyFilters()">
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button class="btn btn-outline-secondary" onclick="clearFilters()">
                            <i class="bi bi-x-circle"></i> 清除筛选
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报告列表 -->
        <div class="row" id="reportsContainer">
            <!-- 报告卡片将在这里动态生成 -->
        </div>

        <!-- 分页 -->
        <div class="row mt-4">
            <div class="col">
                <nav aria-label="报告分页">
                    <ul class="pagination justify-content-center" id="pagination">
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 报告详情模态框 -->
    <div class="modal fade" id="reportDetailModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">报告详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="reportDetailContent">
                    <!-- 报告详情内容将在这里动态生成 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="editReport()">
                        <i class="bi bi-pencil"></i> 编辑报告
                    </button>
                    <button type="button" class="btn btn-info" onclick="navigateToEvent()">
                        <i class="bi bi-arrow-right"></i> 查看事件
                    </button>
                    <button type="button" class="btn btn-danger" onclick="deleteReport()">
                        <i class="bi bi-trash"></i> 删除报告
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑报告模态框 -->
    <div class="modal fade" id="editReportModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-pencil"></i> 编辑报告</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editReportForm">
                        <div class="mb-3">
                            <label for="editContent" class="form-label">报告内容*</label>
                            <textarea class="form-control" id="editContent" rows="6" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">现有照片</label>
                            <div id="existingPhotos" class="row">
                                <!-- 现有照片将在这里显示 -->
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="newPhotos" class="form-label">添加新照片</label>
                            <input type="file" class="form-control" id="newPhotos" multiple accept="image/*">
                            <div id="newPhotoDescriptions" class="mt-2">
                                <!-- 新照片描述输入框将在这里动态生成 -->
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="submitEditReport()">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 照片查看模态框 -->
    <div class="modal fade" id="photoViewModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">照片查看</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="photoViewImage" src="" class="img-fluid" alt="照片">
                </div>
            </div>
        </div>
    </div>

    <!-- 引入认证管理脚本 -->
      <script th:src="@{/js/navbar.js}"></script>
    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/permission.js}"></script>
    <script th:src="@{/js/task-report-management.js}"></script>
</body>
</html> 